判断浏览器是否支持 HTML 5

!!navigator.geolocation;

在 HTML 5 中， navigator.geolocation 可以获取设备的当前位置，通过双" ! "就可以判断是否支持此 API ，即是否支持 HTML 5 。

判断浏览器是否支持 Canvas

/**
 *
 */
function isCanvas() {
  return !!document.createElement('canvas').getContext;
}

HTML5 语法

• 内容类型 HTML5 的文件扩展名与内容类型保持不变。也就是说，扩展名仍然为 .html 或 .htm ，内容类型仍然为 text/html

• 文档类型声明 根据 HTML5 设计化繁为简的准则，文档类型和字符说明都进行了简化

• 字符编码

• 版本兼容性

• 不允许写结束标记的元素有： area 、 base 、 br 、 col 、 command 、 embed 、 hr 、 img 、 input 、 keygen 、 link 、 meta 、 param 、 source 、 track 和 wbr

• 可以省略结束标记的元素有： li 、 dt 、 dd 、 p 、 rt 、 rp 、 optgroup 、 option 、 colgroup 、 thead 、 tbody 、 tfoot 、 tr 、 td 和 th

• 可以省略全部标记的元素有： html 、 head 、 body 、 colgroup 和 tbody

布尔值

对于使用 boolean 值的属性，如 disabled 或 readonly 等，当只写属性而不指定属性值时，表示属性值为 true ；如果想将属性值设置为 false ，可以不设置该属性。另外，要想将属性值设定为 true ，也可以将属性名设定为属性值，或将空字符串设定为属性值。

属性值

属性值两边既可以用双引号，也可以使用单引号。当属性值不包括空字符串 、 < 、 > 、 = 、 单引号 、 双引号等字符时，也可以省略属性值两边的引号。

HTML5 元素

内容类型	说明
内嵌	在文档中添加其它类型的内容，如 audio 、 video 、 canvas 和 iframe 等
流	在文档和应用的 body 中使用的元素，如 form 、 h1 和 small 等
标题	段落标题，如 h1 、 h2 和 hgroup 等
交互	与用户交互的内容，如音频和视频的控件 、 button 和 textarea 等
元数据	通常出现在页面的 head 中，设置页面其它部分的表现和行为，如 script 、 style 和 title 等
短语	文本和文本标记元素，如 mark 、 kbd 、 sub 和 sup 等

HTML5 其它功能

HTML5 引入了一种用于查找页面 DOM 元素的快捷方式。在传统方法中主要使用 JavaScript 脚本来实现。例如，使用 getElementById() 函数根据指定的 ID 值查找并返回元素，使用 getElementsByName() 函数返回所有 name 指定值的元素， getElementsByTagName() 函数返回所有标签名称与指定值相匹配的元素。

有了新的 Selectors API 之后，可以用更精确的方式来指定希望获取的元素，而不必再用标准 DOM 方式循环遍历。 Selectors API 与现在 CSS 中使用的选择规则一样，通过它可以查找页面中的一个或多个元素。例如， CSS 已经可以基于嵌套 、 兄弟和子模式等关系进行元素选择。 CSS 的最新版除添加了更多对伪类的支持，如判断一个对象是否被启用 、 禁用或者被选择等，还支持对属性和层次的随意组合叠加。

函数	说明	实例	返回值
querySelector()	根据指定的选择规则，返回在页面中找到的第一个匹配元素	querySelector ("input.error");	返回第一个 CSS 类名为" error "的文本输入框
querySelectorAll()	根据指定规则返回页面中所有相匹配的元素	querySelectorAll ("#results td");	返回 id 值为 results 的元素下所有的单元格

对于 querySelector() 来说，选择的是满足规则中任意条件的第一个元素。对于 querySelectorAll() 来说，页面中的元素只要满足规则中的任何一个条件，都会被返回，多条规则是用逗号分隔的。

Selectors API 不仅仅是方便，在遍历 DOM 的时候， Selectors API 通常会比以前的子节点搜索 API 更快。为了实现快速样式表，浏览器对选择器匹配进行了高度优化

从技术上讲 JavaScript 日志和浏览器内调试虽然不属于 HTML5 的功能，但在过去的几年里，相关工具的发展出现了质的飞跃。第一个可以用来分析 Web 页面及其所运行脚本的强大工具是一款名为 Firebug 的 Firefox 插件。现在，相同的功能在其它浏览器的内嵌开发工具中也可以找到。例如， Safari 的 Web Inspector 、 Google 的 Chrome 开发者工具（ Developer Tools ） 、 IE 的开发者工具（ Developer Tools ），以及 Opera 的 Dragonfly 。很多调试工具支持设置断点来暂停代码执行 、 分析程序状态以及查看变量的当前值。

console.log API 已经成为 JavaScript 开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息，很多浏览器提供了分栏窗格的视图。 console.log API 要比 alert() 好用很多，因为它不会阻塞脚本的执行。

JSON 是一种相对来说比较新并且正在日益流行的数据交换格式。作为 JavaScript 语法的一个子集，它将数据表示为对象字面量。由于其语法简单和在 JavaScript 编程中与生俱来的兼容性， JSON 变成了 HTML5 应用内部数据交换的事实标准。典型的 JSON API 包含两个函数： parse() 和 stringify() （分别用于将字符串序列化成 DOM 对象和将 DOM 对象转换成字符串）。

如果在旧的浏览器中使用 JSON ，需要 JavaScript 库（有些可以从 json 上找到）。在 JavaScript 中执行解析和序列化效率往往不高，所以为了提高执行速度，新的浏览器原生扩展了对 JSON 的支持，可以直接通过 JavaScript 来调用 JSON 了。这种本地化的 JSON 对象被纳入了 ECMAScript 5 标准，成为了下一代 JavaScript 语言的一部分。它也是 ECMAScript 5 标准中首批被浏览器支持的功能之一。所有新的浏览器都支持 window.JSON ，将来 JSON 必将大量应用于 HTML5 中。

事件处理是目前 Web 应用开发中最麻烦的部分。除了 IE 以外，绝大多数浏览器都支持处理事件和元素的标准 API 。早期 IE 实现的是与最终标准不同的事件模型，而 IE9 开始支持 DOM Level 2 和 DOM Level 3 的特性。如此，在所有支持 HTML5 的浏览器中，用户终于可以使用相同的代码来实现 DOM 操作和事件处理了，包括非常重要的 addEventListener() 和 dispatchEvent() 方法。

最新版本的主流浏览器不仅大量增加了新的 HTML5 标签和 API 。同时主流浏览器中 JavaScript/ECMAScript 引擎升级幅度也非常大。新的 API 提供了很多上一代浏览器无法实现的功能，因而脚本引擎整体执行效率的提升，不论对现有的，还是使用了最新 HTML5 特性的 Web 应用都有好处。 开发出更快的 JavaScript 引擎是目前主流浏览器竞争的核心。过去的 JavaScript 纯粹是被解释执行，而最新的引擎则直接将脚本编译成原生机器代码，相比 2005 年前后的浏览器，速度的提升已经不在一个数量级上了。

2006 年 Adobe 将其 JIT 编译引擎和代号为 Tamarin 的 ECMAScript 虚拟机捐赠给 Mozilla 基金会，从此 JavaScript 引擎的竞争序幕就拉开了。尽管新版的 Mozilla 中 Tamarin 技术已经所剩无几，但 Tamarin 的捐赠促进了各家浏览器对新脚本引擎的研发，而这些引擎的名字就如同它们声的性能一样有意思。总之，得益于浏览器厂商间的良性竞争， JavaScript 的执行性能越来越接近于本地桌面应用程序了。

浏览器	引擎名称	说明
Safari	Nitro （也称 Squirrel Fish Extreme ）	Safari 4 中发布，在 Safari 5 中提升性能，包括字节码优化和上下文线程的本地编译器
Chrome	V8	自从 Chrome 2 开始，使用了新一代垃圾回收机制，可确保内存高度可扩展而不会发生中断
IE	??	注重于后台编译和高效的类型系统，速度比 IE8 快 10 倍
Firefox	JägerMonkey	从 3.5 版本优化而来，结合了快速解释和源自追踪树（ trace tree ）的本地编译
Opera	Carakan	它采用了基于寄存器的字节码和选择性本地编译的方式，声称效率比 10.50 版本提升了 75%
nohref	area	多余属性，被省略

h5 结构

<!-- 声明文档结构类型 -->
<!DOCTYPE html>
<!-- 声明文档文字区域 -->
<html lang="zh-cn">
  <!-- 文档的头部区域 -->

  <head>
    <!-- 文档的头部区域中元数据区的字符集定义， utf-8 表示国际通用的字符集编码格式 -->
    <meta charset="utf-8" />
    <!-- 文档的头部区域的兼容性写法 -->
    <!--[if IE]> <![endif]-->
    <!-- 文档的头部区域的标题。 title 内容对于 SEO 来说极其重要 -->
    <title>文档标题</title>
    <!--[if IE 9]><meta name="ie" content="9" /><![endif]-->
    <!-- 文档的头部区域的兼容性写法 -->
    <!-- 文档的头部区域的兼容性写法 -->
    <!--[if IE 8]><meta name="ie" content="8" /><![endif]-->
    <!-- 文档的头部区域元数据区关于文档描述的定义 -->
    <meta name="description" content="文档描述信息" />
    <!-- 文档的头部区域元数据区关于开发人员姓名的定义 -->
    <meta name="author" content="文档作者" />
    <!-- 文档的头部区域元数据区关于版权的定义 -->
    <meta name="copyright" content="版权信息" />
    <!-- 文档的头部区域的兼容性写法 -->
    <link rel="shortcut/icon" href="favicon.ico" />
    <!-- 文档的头部区域的 apple 设备的图标的引用 -->
    <link rel="apple-touch-icon" href="custom_icon.png" />
    <!-- 文档的头部区域对于不同接口设备的特殊声明。宽 = 设备宽，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <!-- 文档的头部区域的样式文件引用 -->
    <link
      rel="stylesheet"
      href="https://lmssee.com/example/css/html/h5-layout.css"
    />
    <!-- 文档的头部区域的兼容性样式文件引用写法 -->
    <!--[if IE]>
      <link rel="stylesheet" href="win-ie-all.css" />
    <![endif]-->
    <!-- 文档的头部区域的 IE7 浏览器的兼容性写法 -->
    <!--[if IE 7]>
      <link rel=stylesheet type=text/css href="win-ie7.css">
    <![endif]-->
    <!-- 文档的头部区域的关于让 IE8 也兼容 HTML5 的 JavaScript 脚本 -->
    <!--[if lt IE 8]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"></script>
  <![endif] -->
    <!-- 文档的头部区域的  JavaScript 脚本文件调用 -->
    <script src="https://lmssee.com/example/js/html/h5-layout.js"></script>
  </head>

  <body>
    <header class="text-center">HTML5 文档的头部区域</header>
    <nav class="text-center">HTML5 文档的导航区域</nav>
    <section>
      <aside class="text-center">
        HTML5 文档的主要内容区域的侧边导航或菜单区
      </aside>
      <article>
        <!-- HTML5 文档的主要内容区域的内容区 -->
        <section>
          <!-- 以下是一个 section 和 article 的嵌套 -->
          <aside class="text-center">二级侧栏</aside>
          <article>
            <header>
              HTML5 文档的嵌套区域，可以对某个 article
              区域进行头部和脚部的定义。
            </header>
            这样做，可以有非常清晰和严谨的文档目录结构关系
          </article>
        </section>
      </article>
    </section>
    <footer class="text-center">HTML5 文档的脚部区域</footer>
  </body>
</html>

设计微格式

微格式是一种利用 HTML 的 class 属性来对网页添加附加信息的方法，附加信息如新闻事件发生的日期和时间 、 个人电话号码 、 企业邮箱等。微格式并不是在 HTML5 之后才有的，在 HTML5 之前它就和 HTML 结合使用了，但是在使用过程中发现在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。 HTML5 增加了一种新的元素来无歧义地 、 明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它。这个元素就是 time 元素。